<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :rules="rules"
      size="small"
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="预约送货日期" prop="sendDate">
        <el-date-picker
          clearable
          v-model="queryParams.sendDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择预约送货日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        > -->
      </el-form-item>
    </el-form>
    <div class="timeSlotContent">
      <div
        v-for="(item, index) in timelist"
        :key="index"
        class="timeItem"
        :style="{
          backgroundColor: item.selectFlag === 'Y' ? '#4dc0e9' : '#ff6d6a',
          color: item.selectFlag === 'Y' ? '#ffffff' : '#ffffff',
        }"
        @click="
          item.selectFlag === 'Y' &&
            timeConfirm(item.id, item.startSlot, item.endSlot)
        "
      >
        <div class="timeleft">
          <div class="timetop">
            {{ item.startSlot + "~" + item.endSlot }}
          </div>
          <div class="timebottom">
            物流<span class="red-wl">{{ item.wl }}</span>条
          </div>
        </div>
        <div class="line"></div>
        <div class="timewl">
            <span class="red-text">{{
              item.syCount
            }}</span
            >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { timereportlist } from "@/api/system/reservation";
export default {
  data() {
    return {
      timelist: [],
      queryParams: {
        sendDate: new Date().toISOString().split("T")[0],
      },
      rules: {
        sendDate: [
          { required: true, message: "预约送货日期不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      timereportlist(this.queryParams).then((res) => {
        this.timelist = res.data;
      });
    },
    handleQuery() {
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          this.getlist();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.timeSlotContent {
  width: 100%;
  min-height: 700px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 20px 50px 20px;
  .timeItem {
    width: 48%;
    height: 150px;
    border-radius: 8px;
    padding: 20px 50px;
    // border: 1px solid #ababac;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    // color: #ffffff;
    .timeleft {
      display: flex;
      height: 150px;
      flex-direction: column;
      justify-content: space-evenly;
      width: 50%;
      .timetop {
        font-size: 30px;
        //   span {
        //     font-size: 18px;
        //   }
        .green-text {
          color: #65fa97;
        }
        .graw-text {
          color: #afb0b1;
        }
      }
      .timebottom {
        font-size: 30px;
        .red-wl {
          color: #ffffff;
          margin: 0 10px;
  
        }
      }
    }
    .line{
        width: 2px;
        height: 150px;
        background: #ffffff;
    }
    .timewl {
      width: 50%;
      font-size: 90px;
      .red-text {
        color: #ffffff;
      }
    }
  }
}
</style>